import React from 'react'
import { Button, Form, Input } from 'antd';
import { LockOutlined, UserOutlined, SafetyOutlined } from '@ant-design/icons';
import request from '../../utils/request';
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom';
import { updateData, updateUser, updateImg } from '../../store/modules/userToken';
import img from '../../../public/th.jpg'
function Index() {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  //登录请求
  const onFinish = async (values) => {
    console.log('Success:', values);
    //登录接口
    const res = await request.post('/api/login', values)
    console.log('登录', res)
    if (res.data.status === 200) {
      //在本地存储信息
      localStorage.setItem('token', res.data.token)
      localStorage.setItem('user', values.account)
      localStorage.setItem('avatar', img)
      //把token存储到redux-toolkit仓库里面
      dispatch(updateData(res.data.token))
      //把用户信息存储到redux-toolkit仓库里面
      dispatch(updateUser(values.account))
      dispatch(updateImg(img))
      //跳转到首页
      navigate('/')
    }

  };
  return (
    <div style={{ width: '100%', height: '100vh', background: '#fcf1f0', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <h4 style={{ position: 'relative', top: '-180px', left: '160px' }}>登录</h4>
      {/* 登录表单 */}
      <Form

        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{

          wdith: '800px', height: '300px'
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}

        autoComplete="off"
      >
        <Form.Item

          name="account"
          rules={[
            {
              required: true,
              message: '请填写account!',
            },

          ]}
        >
          <Input prefix={<UserOutlined />} placeholder='Account' style={{ width: '300px' }} />
        </Form.Item>
        <Form.Item

          name="password"
          rules={[
            {
              required: true,
              message: '请填写password!',
            },

          ]}
        >
          <Input.Password prefix={<LockOutlined />} placeholder='Password' style={{ width: '300px' }} />
        </Form.Item>
        <Form.Item

          name="verify"
          rules={[
            {
              required: true,
              message: '请填写secret_key!',
            },
          ]}
        >
          <Input.Password prefix={<SafetyOutlined />} placeholder='secret_key' style={{ width: '300px' }} />
        </Form.Item>

        <Form.Item label={null}>
          <span style={{ color: "#6883fb", float: 'right' }}>还没账号? 立即注册</span>
        </Form.Item>

        <Form.Item label={null}>
          <Button type="primary" htmlType="submit" style={{ width: '300px', marginLeft: "-100px" }}>
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Index
